<template>
  <div
    class="Detail_business"
    :class="permissionVerification('edit',detailType) ? 'business_bottom' : ''"
  >
    <PullRefresh
      class="followInfo-detail detail"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <List
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <div>
          <div v-for="(v, i) in list" :key="i" class="info pb-12px">
            <div class="top">
              <div class="name">
                {{ v.followUpUsername }}
              </div>
            </div>
            <div class="mt-12px info_lable">
              <span class="inline-block mr-4px">跟进类型：</span
              ><span style="color: #333" class="text">{{
                v.followUpTypeStr
              }}</span>
            </div>
            <div class="mt-12px info_lable">
              <span class="inline-block mr-4px">跟进时间：</span
              ><span style="color: #333" class="text">
                {{ v.followUpTime }}</span
              >
            </div>
            <div class="mt-12px info_lable">
              <span class="inline-block mr-4px">拜访&ensp; KP：</span>
              <span style="color: #333" class="text"> {{ v.kpName }} </span>

              <span v-if="v.position" style="color: #333" class="text">
                - {{ v.position }}</span
              >
            </div>
            <div class="mt-12px info_lable">
              <span class="inline-block mr-4px">跟进状态：</span>
              <span style="color: #333" class="text"
                >{{ v.followUpStatusStr }}
              </span>
            </div>
            <div v-if="v.followUpType === 1" class="mt-12px info_lable">
              <span class="inline-block mr-4px">拜访内容：</span>
              <span class="text"> {{ v.content }}</span>
            </div>
            <div v-if="v.followUpType === 2" class="mt-12px info_lable">
              <span class="inline-block mr-4px">回访内容：</span
              ><span style="color: #333" class="text"> {{ v.content }}</span>
            </div>
            <div v-if="v.followUpType === 1" class="mt-12px info_lable">
              <span class="inline-block mr-4px">拜访结果：</span
              ><span class="text">{{ v.followUpResult }}</span>
            </div>
            <div v-if="v.followUpType === 2" class="mt-12px info_lable">
              <span class="inline-block mr-4px">回访结果：</span
              ><span style="color: #333" class="text">
                {{ v.followUpResult }}</span
              >
            </div>
            <div v-if="v.followUpType === 5" class="mt-12px info_lable">
              <span class="inline-block mr-4px">跟进结果：</span
              ><span style="color: #333" class="text"
                >{{ v.followUpResult }}
              </span>
            </div>
            <div v-if="v.followUpType === 5" class="flex mt-12px info_lable">
              <span class="inline-block mr-4px w-72px">跟进截图：</span>
              <div class="imgurl">
                <van-uploader v-model="v.fileList" :deletable="false" />
              </div>
            </div>
          </div>
        </div>
      </List>
    </PullRefresh>
    <div v-if="permissionVerification('edit',detailType)" class="add">
      <Button type="info" @click="add()" block>新增线上跟进</Button>
    </div>
    <ActionSheet
      v-model="editShow"
      :title="title"
      :closeable="false"
      class="safePadding my_form"
    >
      <van-form :show-error-message="false" :show-error="false" ref="form">
        <van-field
          v-model="editFrom.followUpTypeStr"
          @click="changeClick((type = 1))"
          name="跟进类型"
          is-link
          label="跟进类型"
          placeholder="跟进类型"
          @focus="iptFocus"
          :rules="[{ required: true, message: '请填写跟进类型' }]"
          :class="editFrom.followUpTypeStr ? 'exist_value' : ''"
        />
        <van-field
          v-model="editFrom.kpName"
          @click="changeClick((type = 2))"
          name="跟进KP"
          is-link
          label="跟进 KP"
          placeholder="跟进KP"
          @focus="iptFocus"
          :rules="[{ required: true, message: '请填写跟进KP' }]"
          :class="editFrom.kpName ? 'exist_value' : ''"
        />
        <van-field
          is-link
          v-model="editFrom.followUpStatusStr"
          name="跟进状态"
          label="跟进状态"
          placeholder="跟进状态"
          @focus="iptFocus"
          @click="changeClick((type = 3))"
          :rules="[{ required: true, message: '请填写跟进状态' }]"
          :class="editFrom.followUpStatusStr ? 'exist_value' : ''"
        />
        <van-field
          v-model="editFrom.followUpResult"
          rows="2"
          autosize
          label="对话结果"
          type="textarea"
          maxlength="150"
          placeholder="请输入对话结果"
          :rules="[{ required: true, message: '请填写对话结果' }]"
          show-word-limit
          :class="editFrom.followUpResult ? 'exist_value' : ''"
        />
        <van-field
          v-if="showUploader"
          :show-arrow="false"
          filed="photos"
          label="跟进凭证"
          :rules="[{ required: true, message: '请上传跟进凭证' }]"
          class="height_auto"
          :class="photoList.length > 0 ? 'exist_value' : ''"
        >
          <template #input>
            <LlUploader
              v-model="photoList"
              @input="uploadChange"
              @change="uploadChange"
            />
          </template>
        </van-field>
        <PopupAction @confirm="editSubmit" @cancel="editShow = false" />
      </van-form>
    </ActionSheet>
    <van-popup
      round
      @close="close"
      v-model="showStatus"
      position="bottom"
      class="safePadding stateInfo"
    >
      <h3 class="px-4 py-5">{{ changeTitle }}</h3>
      <van-picker
        ref="changeStatus"
        :columns="StatusData"
        :swipe-duration="100"
      />
      <PopupAction
        @confirm="confirmStatus(changeTitle)"
        @cancel="showStatus = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  follow,
  businessDataStatus,
  kpList,
  followAdd,
} from "@/services/business/HighSeas.js";
import LlUploader from "@/components/ll-uploader";
import PopupAction from "@/views/business/components/popup_action.vue";
import {
  PullRefresh,
  Button,
  ActionSheet,
  Form,
  Field,
  Popup,
  Picker,
  List,
  Toast,
  Uploader,
} from "vant";
import { permissionVerification } from "@/utils/tools";
export default {
  components: {
    PullRefresh,
    Button,
    ActionSheet,
    List,
    LlUploader,
    PopupAction,
    [Form.name]: Form,
    [Uploader.name]: Uploader,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
  },
  props: {
    detailType: {
      type: String,
      default: "",
    },
    showUploader: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      id: null,
      list: [],
      photoList: [],
      title: "",
      type: "",
      changeTitle: "",
      showStatus: false,
      loading: false,
      refreshing: false,
      finished: false,
      editShow: false,
      editFrom: {},
      StatusData: [],
      StatusData1: [],
      files: [], //上传参数
      fileList: [],
      permissionVerification: permissionVerification,
    };
  },

  methods: {
    change(val) {
      this.id = val;
      this.onRefresh();
    },
    iptFocus() {
      // 禁止弹出手机键盘
      document.activeElement.blur();
    },
    uploadChange(files) {
      this.editFrom.photos = files
        .filter((item) => {
          return item.status == "done";
        })
        .map(({ fileName, originalName, suffix }) => {
          return {
            fileName,
            name: originalName,
            completeUrl: fileName,
            suffix,
          };
        });
      console.log(this.editFrom);
    },
    close() {
      this.editShow = true;
      this.showStatus = false;
    },
    confirmStatus(changeTitle) {
      this.showStatus = false;
      let val = this.$refs.changeStatus.getValues()[0];
      if (changeTitle === "跟进类型") {
        this.StatusData1.forEach((v) => {
          if (v.name == val) {
            this.editFrom.followUpTypeStr = val;
            this.editFrom.followUpType = v.type;
          }
        });
      } else if (changeTitle === "跟进KP") {
        console.log(this.StatusData1, val);
        this.StatusData1.forEach((v) => {
          let name = v.name + "-" + v.positionStr;
          if (name == val) {
            this.editFrom.kpName = val;
            this.editFrom.kpId = v.id;
          }
        });
      } else if (changeTitle === "跟进状态") {
        this.StatusData1.forEach((v) => {
          if (v.name == val) {
            this.editFrom.followUpStatusStr = val;
            this.editFrom.followUpStatus = v.type;
          }
        });
      }
    },
    changeClick(type) {
      this.editShow = false;
      this.showStatus = true;
      this.StatusData = [];
      if (type === 1) {
        this.changeTitle = "跟进类型";
        businessDataStatus({ type: "follow_up_type" }).then((res) => {
          this.StatusData1 = res;
          res.forEach((v) => {
            if (v.type === 5) {
              this.StatusData.push(v.name);
            }
          });
        });
      } else if (type === 2) {
        this.changeTitle = "跟进KP";
        kpList({ boId: this.id }).then((res) => {
          this.StatusData1 = res;
          res.forEach((v) => {
            let name = v.name + "-" + v.positionStr;
            this.StatusData.push(name);
          });
        });
      } else if (type === 3) {
        this.changeTitle = "跟进状态";
        businessDataStatus({ type: "follow_up_status" }).then((res) => {
          console.log(res);
          res = res.slice(1);
          this.StatusData1 = res;
          res.forEach((v) => {
            this.StatusData.push(v.name);
          });
        });
      }
    },
    editSubmit() {
      this.$refs.form
        .validate()
        .then(() => {
          console.log(this.editFrom);
          let parmas = {
            followUpType: Number(this.editFrom.followUpType),
            kpId: Number(this.editFrom.kpId),
            followUpStatus: Number(this.editFrom.followUpStatus),
            businessOpportunityGroupId: Number(
              this.$store.state.business.businessOpportunityGroupId
            ),
            followUpResult: this.editFrom.followUpResult,
            files: this.editFrom.photos,
            businessOpportunityId: this.id,
          };
          followAdd(parmas)
            .then((res) => {
              console.log(res);
              this.editShow = false;
              this.editFrom = {};
              this.photoList = [];
              localStorage.setItem("updataList", true);
              this.getData();
            })
            .catch((e) => {
              Toast(e.message || e.errMessage);
            });
        })
        .catch((err) => {
          console.log(err.errMessage || err.message);
          Toast({ message: err[0].message, position: "top" });
        });
    },
    add() {
      this.editFrom = {};
      this.photoList = [];
      this.editShow = true;
      this.type = "新增";
      this.title = "新增外呼/微信跟进";
    },
    onLoad() {
      setTimeout(() => {
        this.loading = false;
        this.finished = true;
      }, 500);
    },
    onRefresh() {
      // this.onLoad();
      this.finished = false;
      this.getData();
    },
    getData() {
      this.loading = true;
      follow({ id: this.id })
        .then((res) => {
          // console.log(res);
          this.loading = false;
          this.refreshing = false;
          this.list = res;
          this.list.forEach((v) => {
            if (v.files != null) {
              v.fileList = v.files.map((item) => {
                return { url: item.completeUrl };
              });
            } else {
              v.fileList = [];
            }
          });
        })
        .catch((e) => {
          Toast(e.message || e.errMessage);
          this.loading = false;
          this.refreshing = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.Detail_business {
  height: calc(100vh - 90px);
  overflow: auto;
  padding-bottom: 10px;
  .safePadding {
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
  }
  .van-action-sheet__header {
    text-align: left;
    line-height: normal;
    padding-top: 20px;
    padding-bottom: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333333;
    font-size: 16px;
    font-weight: 600;
    padding-left: 16px;
  }
  .add {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 98px;
    padding: 10px 14px 44px;
    background-color: #fff;
    .van-button {
      border-radius: 10px;
    }
  }
  .followInfo-detail {
    .imgurl {
      display: flex;
      flex-wrap: wrap;
      ::v-deep .van-uploader__upload {
        display: none;
      }
    }
    ::v-deep.van-uploader__input-wrapper {
      width: 70px;
      .absolute {
        bottom: 17px;
      }
    }

    .info {
      padding-top: 16px;
      margin: 10px;
      background-color: #fff;
      border-radius: 8px;
      color: #666;
      font-size: 13px;
      .top {
        padding-bottom: 12px;
        border-bottom: 1px solid #f5f5f5;

        .name {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          display: flex;
          align-items: center;
          flex-grow: 1;
        }
        .name:before {
          content: " ";
          border-left: 4px solid #1d6fe9;
          height: 12px;
          margin-right: 8px;
          display: block;
        }
      }

      .van-button--mini {
        border: none;
        .van-button__text {
          color: #1d6fe9;
          font-size: 14px;
        }
      }
      .info_lable {
        display: flex;
        align-items: flex-start;
        margin-left: 12px;
        .text {
          display: inline-block;
          flex-grow: 1;
          word-wrap: break-word;
          max-width: 262px;
          color: #333333;
        }
      }
    }
    ::v-deep .van-image__img,
    .van-image__error,
    .van-image__loading {
      border-radius: 10px;
    }
  }
}
.business_bottom {
  height: calc(100vh - 190px - env(safe-area-inset-bottom));
}
</style>
